<template>
  <div>
    <div v-for="(group, index) in selectedNode.props.groups" :key="index + '_g'" class="group">
      <div class="group-header">
        <span class="group-name">条件组 {{ groupNames[index] }}</span>
        <div class="group-cp">
          <span>组内条件关系：</span>
          <vxe-switch v-model='group.groupType' open-label='且' :open-value='"AND"' close-label='或'
                      :close-value='"OR"'></vxe-switch>
        </div>
        <div class="group-operation">
          <a-popover placement="bottom" title="选择审批条件" width="500" trigger="hover">
            <!-- <div>以下条件将决定具体的审批流程</div>-->
            <template slot="content">
              <vxe-checkbox-group v-model="group.cids">
                <vxe-checkbox :label="condition.id" v-for="(condition, cindex) in conditionList" :key="condition.id"
                              @change.native="conditionChange(cindex, group)">
                  {{ condition.title }}
                </vxe-checkbox>
              </vxe-checkbox-group>
            </template>
            <vxe-button icon="vxe-icon--plus" round circle status="primary"></vxe-button>
          </a-popover>
          <vxe-button icon="vxe-icon--minus" round circle status="danger" @click="delGroup(index)"></vxe-button>
        </div>
      </div>
      <div class="group-content">
        <p v-if="group.conditions.length === 0">点击右上角 + 为本条件组添加条件</p>
        <div v-else>
          <vxe-form ref="condition-form" title-width="60px" customLayout>
            <!--构建表达式-->
            <vxe-form-item v-for="(condition, cindex) in group.conditions" :key="condition.id + '_' + cindex"
                           :title="condition.title" span="24">
              <!--              <j-ellipsis :value="condition.title" :length="5" style="width: 25px;"></j-ellipsis>-->
              <span v-if="condition.valueType === ValueType.input">
                <vxe-select placeholder="判断符" style="width: 120px;" v-model="condition.compare" transfer
                            @change="condition.value = []">
                  <vxe-option label="等于" value="="></vxe-option>
                  <vxe-option label="包含在" value="IN"></vxe-option>
                </vxe-select>
                 <span v-if="isSelect(condition.id)" style="margin-left: 10px">
                   <vxe-select v-if="condition.compare === 'IN'" style="width: 200px;" clearable multiple transfer
                               v-model="condition.value" placeholder="选择值">
                     <vxe-option v-for="(option, oi) in getOptions(condition.id)" :key="oi" :label="option"
                                 :value="option"></vxe-option>
                   </vxe-select>
                   <vxe-select v-else style="width: 200px;" clearable v-model="condition.value[0]" transfer
                               placeholder="选择值">
                     <vxe-option v-for="(option, oi) in getOptions(condition.id)" :key="oi" :label="option"
                                 :value="option"></vxe-option>
                   </vxe-select>
                 </span>
                 <span v-else style="margin-left: 10px">
                   <vxe-input v-if="condition.compare === '='" style="width: 200px;" placeholder="输入比较值"
                              v-model="condition.value[0]"/>
                       <a-select v-else v-model="condition.value" mode="tags" allowClear placeholder="输入可能包含的值"
                                 style="width: 200px">
                       </a-select>
                 </span>
              </span>
              <span v-else-if="condition.valueType === ValueType.number">
                <vxe-select placeholder="判断符" style="width: 120px;" v-model="condition.compare" transfer>
                  <vxe-option :label="exp.label" :value="exp.value" :key="exp.value"
                              v-for="exp in explains"></vxe-option>
                </vxe-select>
                <span style="margin-left: 10px">
                  <vxe-input style="width: 200px;" v-if="conditionValType(condition.compare) === 0"
                             placeholder="输入比较值" type="number" v-model="condition.value[0]"/>
                                         <a-select v-else-if="conditionValType(condition.compare) === 1"
                                                   v-model="condition.value" mode="tags" allowClear
                                                   placeholder="输入可能包含的值" style="width: 200px">
                       </a-select>
                  <span v-else>
                    <vxe-input style="width: 120px;" type="number" placeholder="输入比较值"
                               v-model="condition.value[0]"/>
                    <span> ~
                      <vxe-input style="width: 120px;" type="number" placeholder="输入比较值"
                                 v-model="condition.value[1]"/>
                    </span>
                  </span>
                </span>
              </span>
              <!--              <vxe-button type="text" icon="fa fa-trash-o" status="danger" @click="rmSubCondition(group, cindex)" >删除</vxe-button>-->
              <vxe-button class="icon-delete" type="text" status="danger" @click="rmSubCondition(group, cindex)">删除
              </vxe-button>
            </vxe-form-item>
          </vxe-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {FormType} from "@/components/process/common/ComponentsConfigExport";

export default {
  name: "ConditionGroupItemConfig",
  components: {},
  data() {
    return {
      ValueType: FormType,
      showOrgSelect: false,
      groupNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
      supportTypes: [FormType.number, FormType.input],
      explains: [
        {label: '等于', value: '='},
        {label: '大于', value: '>'},
        {label: '大于等于', value: '>='},
        {label: '小于', value: '<'},
        {label: '小于等于', value: '<='},
        {label: '包含在', value: 'IN'},
        {label: 'x < 值 < x', value: 'B'},
        {label: 'x ≤ 值 < x', value: 'AB'},
        {label: 'x < 值 ≤ x', value: 'BA'},
        {label: 'x ≤ 值 ≤ x', value: 'ABA'},
      ]
    }
  },
  computed: {
    selectedNode() {
      return this.$store.state.flow.selectedNode
    },
    select() {
      return this.selectedNode.props.assignedUser || []
    },
    formItems() {
      return this.$store.state.flow.design.formItems
    },
    formMap() {
      const map = new Map();
      this.formItems.forEach(item => this.itemToMap(map, item))
      return map
    },
    conditionList() {
      //构造可用条件选项
      const conditionItems = []
      this.formItems.forEach(item => this.filterCondition(item, conditionItems))
      // if (conditionItems.length === 0 || conditionItems[0].id !== 'root') {
      //   conditionItems.unshift({id: 'root', title: '发起人', valueType: 'User'})
      // }
      return conditionItems
    }
  },
  methods: {
    itemToMap(map, item) {
      map.set(item.id, item)
      if (item.name === 'SpanLayout') {
        item.props.items.forEach(sub => this.itemToMap(map, sub))
      }
    },
    isSelect(formId) {
      let form = this.formMap.get(formId)
      if (form && (form.name === 'SelectInput' || form.name === 'MultipleSelect')) {
        return true
      }
      return false
    },
    getOptions(formId) {
      return this.formMap.get(formId).props.options || []
    },
    conditionValType(type) {
      switch (type) {
        case '=':
        case '>':
        case '>=':
        case '<':
        case '<=':
          return 0;
        case 'IN':
          return 1;
        default:
          return 2;
      }
    },

    filterCondition(item, list) {
      if (item.name === 'SpanLayout') {
        item.props.items.forEach(sub => this.filterCondition(sub, list))
      } else if (this.supportTypes.indexOf(item.type) > -1) {
        //判断是否是必填项
        item.rules?.forEach((v, index) => {
          if (v.required === true) {
            list.push({title: item.label, id: item.model, valueType: item.type})
          }
        })
      }
    },

    delGroup(index) {
      this.selectedNode.props.groups.splice(index, 1)
    },
    rmSubCondition(group, index) {
      group.cids.splice(index, 1)
      group.conditions.splice(index, 1)
    },
    conditionChange(index, group) {
      //判断新增的
      group.cids.forEach(cid => {
        if (0 > group.conditions.findIndex(cd => cd.id === cid)) {
          //新增条件
          let condition = {...this.conditionList[index]}
          condition.compare = '';
          condition.value = []
          group.conditions.push(condition)
        }
      })
      for (let i = 0; i < group.conditions.length; i++) {
        //去除没有选中的
        if (group.cids.indexOf(group.conditions[i].id) < 0) {
          group.conditions.splice(i, 1)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.group {
  margin-bottom: 20px;
  color: #5e5e5e;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid #e3e3e3;

  .group-header {
    padding: 5px 10px;
    //background: #e3e3e3;
    position: relative;

    div {
      display: inline-block;
    }

    .group-name {
    }

    .group-cp {
      position: absolute;
      left: 100px;
      display: flex;
      top: 2px;
      justify-content: center;
      align-items: center;
    }

    .group-operation {
      position: absolute;
      right: 10px;
      top: 2px;
    }
  }

  .group-content {
    padding: 10px 5px;

    p {
      text-align: center;
      font-size: small;
    }

    .icon-delete {
      position: absolute;
      cursor: pointer;
      //top: 12px;
      right: 0;
    }
  }

  .condition-title {
    display: block;
    width: 100px;
  }
}
</style>
